const MAIN_WIDTH = 1920
const MAX_HEIGHT = 1080

function resize(sel) {
    const el = document.querySelector(sel);
    const bw = document.body.clientWidth
    const bh = document.body.clientHeight

    let per = bw / MAIN_WIDTH

    let pery = per
    if(MAX_HEIGHT * per > bh) {
        pery = bh / MAX_HEIGHT
        per = pery
    }

    el.style.transform = 'scaleX(' + per + ') scaleY(' + pery + ') translateX(-50%) translateY(-50%)'

}

function init() {
    window.addEventListener('resize', function() {
        console.info('resize')
        resize('#main')
    })
    resize('#main')

    initPie()
    initBar()
    initCompany()
    initMarker()
   


    $('.detail-btn').click(function() {
        openDialog()
    })

    $('.dialog-close').click(function() {
        $('#dialog').fadeOut()
        $('#dialog-mask').fadeOut()
    })
}

function initChart(el, option) {
    const myChart = echarts.init(el);
    myChart.setOption(option)

    return myChart
}

function initPie(sel) {
    if(!sel) {
        sel = '#pieEl'
    }
    const el = document.querySelector(sel)
    const colors = ['#12b796', '#1dadff', '#24dcf7', '#18cac3']

    const data = [
        {value: 1048, name: '新材料'},
        {value: 735, name: '海洋高科技'},
        {value: 580, name: '生命健康'},
        {value: 484, name: '节能环保'}
    ]

    const sum = data.map(o => o.value).reduce((a, b) => a + b)

    const option = {
        color: colors,
        title: {
            left: 'center',
            top: '30%',
            text: '1211',
            textStyle: {
                color: '#FFA951',
                fontSize: 24
            },
            subtext: '领域分布',
            subtextStyle: {
                color: '#FFF'
            }
         },
        grid: {
            left: '0%',
            right: '0%',
            top: '0%',
            bottom: '0%',
            containLabel: true,
            // show: true,
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
            bottom: '0%',
            left: 'center',
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: '#FFF'
            }
        },
        series: [
            {   // 外环刻度
                type: 'gauge',
                startAngle: 270,
                endAngle: -89.9999,
                center: ['50%', '45%'],
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#06aefc'
                    }
                },
                axisLabel: {
                    show: false
                },
                radius: '84%',
                splitNumber: 12,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: true,
                    length: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    lineStyle: {
                        width: 2,
                        color: '#06aefc',
                        distance: 10,
                    } //刻度节点线
                },
                detail: {
                    show: false
                },
            },
            { // 内部阴影
                type: "pie",
                center: ['50%', '45%'],
                radius: ['70%',  '72%'],
                data: [1],
                silent: true,
                tooltip: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [{
                                offset: 0.2,
                                color: '#06aefc',
                            },

                            {
                                offset: 0.8,
                                color: 'rgba(0, 0, 0, 0)',
                            },
                        ]),
                        shadowColor: '#46c0f9',
                        shadowBlur: 10
                    }
                }

            },
            {
                type: 'pie',
                radius: ['35%', '60%'],
                center: ['50%', '42%'],
                label: {
                    show: true,
                    color: '#2affeb',
                    formatter: function(params) {
                        var percent = 0;
                        var total = sum;

                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== '') {
                            return '{percent|' + percent + '%}\n{name|' + params.name + '}';
                        } else {
                            return '';
                        }
                    },
                    rich: {
                        name: {
                            color: "#FFF",
                            fontSize: 12,
                            padding: [6, 5, 6, 0],
                            align: 'left'
                        },
                        hr: {
                            borderColor: 'rgba(102, 121, 157, 1)',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0,
                        },
                        percent: {
                            color: "#2affeb",
                            fontSize: 14,
                            padding: [6, 5, 6, 0],
                            align: 'center'
                        },
                    }
                },
                labelLine: {
                    show: true,
                    length1: 2,
                    length2: 40
                },
                itemStyle: {
                    borderWidth:5,
                    borderColor: "#071d51"
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },

                tooltip: {
                    show: true
                },
                data: data
            }

        ]
    }

    initChart(el, option)
}

function initBar(sel, colors) {
    if(!sel) {
        sel = '#barEl'
    }
    if(!colors) {
        colors = ['#f9ba2f', '#186484']
    }
    const el = document.querySelector(sel)

    const data = [
        {value: 1542, name: '单位未上报'},
        {value: 735, name: '等待初审'},
        {value: 1048, name: '等待复审'},
        {value: 1200, name: '书面评审中'},
        {value: 1200, name: '答辩评审中'}
    ]

    const option = {
        grid: {
            left: '0%',
            right: '0%',
            top: '0%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                color: '#fff',
                rotate: 35
            },
            axisTick: {
                show: false
            },
            data: data.map(d=>d.name)
        },
        yAxis: {show: false},
        series: [{
            name: "Sale",
            type: "bar",
            data: data.map(d=>d.value),
            label: {
                show: true,
                position: 'top',
                color: '#fff'
            },
            barWidth: '28px',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                        [{offset: 0, color: colors[0]},
                        {offset: 1, color: colors[1]}
                    ])
            }
        }]
    }

    initChart(el, option)
}

function initCompany() {
    const el = document.querySelector("#company")
    const colors = ['#F8a513', '#19b5fb', '#1dfd9c']

    const options = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '18%',
            bottom: '10%'
        },
        legend: {
            show: false,
            data: ['500万以上', '100-500万', '100万以下'],
            textStyle: {
                color: '#FFF'
            },
            left: 'right',
            top: '5%'
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                axisLabel: {
                    color: '#FFF'
                }
            }
        ],
        yAxis: [
            {
                type: 'value', 
                name: '单位：万元',
                axisLabel: {
                    color: '#FFF'
                },
                nameTextStyle: {
                    color: '#FFF'
                },
                splitLine: {
                    lineStyle: {
                        color: '#162a5e',
                        type: 'dashed'
                    } 
                }              
            }
        ],
        series: [
            {
                type: 'bar',
                barWidth: '15px',
                label: {},
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334]
            },
            {
                type: 'line',
                tooltip: {
                    show: false
                },
                label: {},
                itemStyle: {
                    color: colors[0]
                },
                lineStyle: {
                    color: colors[0]
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334]
            }
            /*,
            {
                name: '100-500万',
                type: 'bar',
                barWidth: '15px',
                label: {},
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290]
            },
            {
                name: '100万以下',
                type: 'bar',
                barWidth: '15px',
                label: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190]
            }   
            */         
        ]
    }

    initChart(el, options)
}

function initDialogChart() {
    initPie('#dialogPie1')
    initPie('#dialogPie2')
    initPie('#dialogPie3')

    initBar('#dialogBar1')
    initBar('#dialogBar2', ['#dd2503', '#1e2057'])
    initBar('#dialogBar3', ['#0076FC', '#134a7e'])
}

function openDialog() {
    $('#dialog-mask').fadeIn()
    $('#dialog').fadeIn(function() {
        initDialogChart()
    })
}

function initMarker() {
    // name 对应svg中的 attr属性
    const data = [
        {name: 'cixi', value: 12345},
        {name: 'yinzhou', value: 22134},
        {name: 'beican', value: 13378},
        {name: 'ninhai', value: 14598}
    ]

    // 未了避免svg代码直接放到HTML影响代码，采用embed嵌入，需要加载时间
    setTimeout(_ => {
        SVG.setMarker(data)
    }, 500)
    
}